<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import { color } from 'echarts';
export default {
  name: "",
  mounted() {
    // 引入echarts
    let echarts = require("echarts");
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        show: false, // 隐藏x轴
       // 最大与最小值设置
       min:0,
       max:100
      },    
      yAxis: {
        show: false, // // 隐藏y轴
         type:'category', // 在这个轴上均分
      },
      //系列
      series: [
        {
          type: "bar",
          data: [76],
          color:'yellowgreen',
          barWidth:25, // 宽度
          showBackground: true, // 开启背景色
          // 设置背景色
          backgroundStyle:{
              color:'#eee'
          },
          // 设置文本
          label:{
              show:true,
              formatter:'|', // 文本内容
              position:'right', //位置
              color:'red',
              textStyle:{
                  fontSize:30 // 文本大小
              }
          }
        },
      ],
      //布局调试
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>